<template>
  <div class="div1">
    <el-descriptions column="2">
      <!-- 跨几行显示 -->
      <el-descriptions-item :rowspan="2">
        <el-avatar
          shape="square"
          :size="60"
          :fit="fit"
          :src="UserMessage.avatarPath"
        />
      </el-descriptions-item>
      <!-- 昵称编辑 -->
      <el-descriptions-item label="昵称:">
        <span v-if="!isEditingNickname">{{ UserMessage.nickname }}</span>
        <el-input v-else v-model="UserMessage.nickname" @blur="saveNickname" />
      </el-descriptions-item>
      <el-descriptions-item label="名称:">{{
        UserMessage.username
      }}</el-descriptions-item>
      <el-descriptions-item label="积分" span="2">{{
        UserMessage.points
      }}</el-descriptions-item>
      <el-descriptions-item label="id" span="2">{{
        UserMessage._id
      }}</el-descriptions-item>
      <el-descriptions-item label="成就标签" span="2">
        <el-tag size="small">挂机达人</el-tag>
        <el-tag size="small">头像收藏家</el-tag>
        <el-tag size="small">五子棋高手！</el-tag>
      </el-descriptions-item>
      <!-- 签名编辑 -->
      <el-descriptions-item label="签名" :rowspan="3" span="2">
        <div v-if="!isEditingBio" class="descriptions-bio">
          {{ UserMessage.bio }}
        </div>
        <el-input
          v-else
          v-model="UserMessage.bio"
          type="textarea"
          @blur="saveBio"
          rows="4"
          maxlength="30"
        />
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <div :class="isModify ? 'div2-Modify' : 'div2'">
    <divideLines direction="vertical" />
  </div>
  <div :class="isModify ? 'div3-Modify' : 'div3'">
    <divideLines direction="horizontal" />
  </div>
  <div class="div4"></div>
  <div class="div5">
    <el-button
      :type="isEditingNickname ? 'success' : 'primary'"
      @click="toggleEditing('nickname')"
    >
      {{ isEditingNickname ? "保存昵称" : "修改昵称" }}
    </el-button>
    <el-button
      :type="isEditingBio ? 'success' : 'primary'"
      @click="toggleEditing('bio')"
    >
      {{ isEditingBio ? "保存签名" : "修改签名" }}
    </el-button>
    <el-button type="primary" @click="test"> 修改头像 </el-button>
    <el-button type="primary"> 修改成就 </el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import divideLines from "@/element/divideLines.vue";
import useUser from "@/store/user.js";

let userData = useUser();
let UserMessage = ref(userData.getUser());

// 控制编辑状态的响应式数据
let isEditingNickname = ref(false);
let isEditingBio = ref(false);
let isModify = ref(false);

// 切换编辑状态
function toggleEditing(field) {
  if (field === "nickname") {
    isEditingNickname.value = !isEditingNickname.value;
  } else if (field === "bio") {
    isEditingBio.value = !isEditingBio.value;
  }
}

let test = () => {
  isModify.value = !isModify.value;
};

// 保存昵称
function saveNickname() {
  // 添加保存昵称的逻辑
  isEditingNickname.value = false;
}

// 保存签名

function saveBio() {
  // 添加保存签名的逻辑
  isEditingBio.value = false;
}
</script>

<style scoped>

.div1 {
  grid-area: 3 / 3 / 25 / 16;
}
.div2 {
  grid-area: 2 / 18 / 25 / 20;
  margin-left: 200px;
}
.div2-Modify {
  grid-area: 2 / 18 / 25 / 20;
}

.div3 {
  grid-area: 27 / 2 / 29 / 29;
}
.div3-Modify {
  grid-area: 27 / 2 / 29 / 16;
}

.div4 {
  grid-area: 2 / 21 / 29 / 30;
}
.div5 {
  grid-area: 29 / 2 / 31 / 30;
}

.descriptions-bio {
  min-width: 200px;
  max-width: 400px;
  word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
  text-indent: 2em; /* 设置首行缩进为两个字符，em是相对单位，这里大约等于当前字体大小的两倍 */
}

.el-descriptions-item {
  width: 60px;
}
</style>